<template>
	<div class="wrapper">
		<swiper :options="swiperOption">
	    <swiper-slide v-for="item of swiperList" :key="item.id">
	    	<img class="swiper-image" :src="item.imgUrl">
	    </swiper-slide>

	    <div class="swiper-pagination"  slot="pagination"></div>
	    </swiper>
	</div>
</template>

<script>
	export default{
		name: 'HomeSwiper',
		data(){
			return{
				swiperOption:{
					pagination: '.swiper-pagination',
					loop: true
				},
				swiperList:[{
					id: '0001',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1812/47/a51fe403715df102.jpg_750x200_085792b6.jpg'
				},{
					id: '0002',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1811/29/2a6b77b6ff72402.jpg_750x200_d4cec568.jpg'
				}]
			}
		}
	}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 26.7%
    .swiper-image
      width:100%
</style>